//引入antd 需要的组件
import { Button, Form, Input, message } from 'antd';
//引入跳转 
import { useNavigate } from "react-router-dom";
//引入登录接口
import { loginInfo } from "../request/api";



//引入登录页面的css
import "../assets/css/login.css";

export default function Login() {
    //路由跳转
    const Navigate = useNavigate();

    //表单完成事件的回调
    const login = (val) => {
        loginInfo(val).then(res => {
            //判断是否成功
            if (res.code == 200) {
                //储存token
                sessionStorage.setItem('userInfo', JSON.stringify(res.list));
                //成功提示
                message.success({
                    content: res.msg,
                    duration: 1
                });
                //跳转页面
                setTimeout(() => {
                    Navigate('/index');
                }, 500);
            } else {
                //失败提示
                message.error({
                    content: res.msg,
                    duration: 1
                });
            }
        })

    };
    return (<div id='login'>
        <Form
            className='form'
            labelCol={{
                span: 3,
            }}
            style={{
                maxWidth: 600,
            }}
            autoComplete="off"
            //这是完成 成功的回调
            onFinish={login}
        >
            {/* 用户名 */}
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    {
                        required: true,
                        message: '请输入用户名',
                    },
                ]}
            >
                <Input allowClear={true} />
            </Form.Item>

            {/* 密码 */}
            <Form.Item
                label="密码"
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入密码',
                    },
                ]}
            >
                <Input.Password allowClear={true} />
            </Form.Item>

            {/* 登录按钮 */}
            <Form.Item
                wrapperCol={{
                    offset: 3,
                    span: 5,
                }}
            >
                <Button type="primary" htmlType='submit'>
                    登录
                </Button>
            </Form.Item>
        </Form>
    </div>)
}